import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // MaterialApp是根组件
    return MaterialApp(
      home: Tabs(),
      theme: ThemeData(primaryColor: Colors.blue),
    );
  }
}

class Tabs extends StatefulWidget {
  Tabs({Key? key}) : super(key: key);

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  //底部NavigationBar哪个点亮，这里默认选中左边第一个
  List<Widget> widgets = [IndexPage(), CatagoryPage(), SettingPage()];
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('bottomNavigationBar'),
      ),
      body: this.widgets[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        fixedColor: Colors.amberAccent,
        type: BottomNavigationBarType.fixed, //配置底部可以有多个按钮对比下shifting
        //type: BottomNavigationBarType.shifting,
        iconSize: 30,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置")
        ],
        currentIndex: this._currentIndex,
        //点击底部菜单导航的时候响应的方法
        onTap: (index) {
          setState(() {
            //可以在Debug console里看到输出
            print(index);
            //设置高亮显示
            this._currentIndex = index;
          });
        },
      ),
    );
  }
}

//以下部分可以抽出去变成自由库，flutter里面所有的页面都是组件。组件之间的嵌套组成完整的页面。
class IndexPage extends StatelessWidget {
  const IndexPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("Index Page"),
    );
  }
}

class CatagoryPage extends StatelessWidget {
  const CatagoryPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("Catagory Page"),
    );
  }
}

class SettingPage extends StatelessWidget {
  const SettingPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("Setting Page"),
    );
  }
}
